<template>
  <div class="wrap">
    <span class="title">{{ title }}</span>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <piechart id="accelerateUsers" :chartData="pieData" v-if="pieData" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import piechart from "./piechart.vue";
import { connrequest2 } from "@/api/firstPage";
import { parseTime } from '@/utils/index.js'
export default {
  components: { piechart },
  data() {
    return {
      pieData: [],
      listTime: [{ 'StartTime': '', 'EndTime': '' }],
    };
  },
  props: {
    prevenData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    title: {
      type: String,
      default: '这里是一个标题'
    }
  },
  watch: {
    prevenData: {
      deep: true,
      handler(val) {
        this.prevenData = val
        this.getData();
      }
    }
  },
  methods: {
    async getData() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - (this.prevenData.processDays * 1 * 3600 * 24 * 1000);
      const data = {
        Filter: {
          StartTime: parseTime(startTime),
          EndTime: parseTime(endTime),
        }
      }
      const res = await connrequest2('GetDeviceStatusSum', data);
      res.Data = res.Data || []
      if (res?.Data?.length) {
        const arr = res.Data
          .filter(item => item.Count > 0)
          .map(item => ({
            name: item.Name || '其他',
            value: item.Count,
            count: item.Count
          }));
        this.pieData = arr
      } else {
        const dom = document.getElementById('accelerateUsers');
        dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
        dom.removeAttribute('_echarts_instance_');
      }
    }
  }
};
</script>

<style scoped lang='scss'>
.wrap {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  height: calc(100% - 16px);
  /* 继承父组件高度 */
  min-height: 100px;
  /* 防止内容溢出 */
  box-sizing: border-box;
  /* 确保边距不影响高度 */
}

.title {
  flex-shrink: 0;
  /* 防止标题缩小 */
}

.el-row {
  flex: 1;
  /* 占据剩余高度 */
  display: flex;
  /* 确保子元素自适应 */
}

.el-col {
  flex: 1;
  /* 占据全部可用高度 */
  display: flex;
  /* 确保piechart自适应 */
  flex-direction: column;
  /* 垂直排列 */
}
</style>